<!--
 * @Author: byron
 * @Date: 2021-09-26 09:16:51
 * @LastEditTime: 2021-09-28 18:54:31
-->
<template>
    <div class="song-card">
        <div class="order-warp">
            <span class="order">{{ thunkedOrder }}</span>
        </div>
        <div class="img-warp">
            <img v-lazy="$utils.genImgURL(img, 120)" alt="" />
        </div>

        <div class="desc-warp">
            <p>{{ name }}</p>
            <p>{{ artStr }}</p>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    props: ['img', 'name', 'artStr', 'order'],
    data() {
        return {}
    },
    watch: {},
    computed: {
        thunkedOrder() {
            const { order } = this
            if (!order) return
            else if (order < 10) return `0${order}`
            return order
        },
    },
    methods: {},
    created() {},
    mounted() {},
}
</script>
<style lang="scss" scoped>
.song-card {
    width: 100%;
    display: flex;
    padding: 8px;
    cursor: pointer;
    font-size: 10px;
    &:hover {
        background-color: var(--playlist-hover-bgcolor);
    }
    .order-warp {
        width: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0px 6px;
        margin-right: 8px;
    }
    .img-warp {
        position: relative;
        width: 60px;
        height: 60px;
        margin-right: 8px;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .desc-warp {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        flex: 1;
    }
}
</style>
